النماذج (Forms) | مرجع Bootstrap

1. حقول الإدخال الأساسية (Form Controls)

المظهر القياسي للحقول النصية والبريد الإلكتروني وكلمات المرور.

المعاينة

form-control: الكلاس السحري. بمجرد وضعه على أي <input> أو <textarea> يعطيه عرض 100%، وحدود ناعمة، ووهج جميل عند النقر عليه (Focus).
form-label: ينسق اسم الحقل (Label) بمسافة سفلية مناسبة ولون متناسق.
form-text: يستخدم لكتابة ملاحظات مساعدة أسفل الحقل، ويكون لونها باهتاً لعدم تشتيت الانتباه.
mb-3 (Margin Bottom 3): يستخدم لإضافة مسافة فارغة أسفل كل حقل لفصلها عن بعضها.

ميزة حديثة جداً تجعل عنوان الحقل داخل الحقل نفسه، ويرتفع لأعلى الشاشة بطريقة أنيقة عند الكتابة.

المعاينة

form-floating: توضع كحاوية للعنصر لتفعيل الميزة.
ترتيب مهم جداً: يجب أن تضع الـ <input> أولاً، ثم يأتي بعده مباشرة <label> في الكود (عكس النماذج العادية).
placeholder: ضروري جداً! لن تعمل التسمية العائمة بشكل صحيح بدون وضع الـ Placeholder للحقل (حتى ولو كان فارغاً أو غير مرئي).

تنسيق جميل لخيارات الاختيار من القوائم (Dropdown Select).

المعاينة

form-select: يضاف هذا الكلاس لعنصر الـ <select> بدلاً من form-control. وهو يقوم بتعديل شكل السهم الافتراضي الخاص بالمتصفح، ويجعل التنسيق موحداً وجميلاً سواء كنت تستخدم Chrome أو Safari أو غيره.
form-select-lg و -sm: تستخدم لتكبير أو تصغير حجم القائمة.

مربعات الاختيار (متعددة) والأزرار الدائرية (خيار واحد فقط).

المعاينة

مربع اختيار (Checkbox):

موافق على الشروط

أزرار دائرية (Radio):

ذكر

أنثى (افتراضي)

زر التبديل (Switch):

تفعيل الوضع المظلم

form-check: الحاوية الأساسية.
form-check-input و form-check-label: تُعطى للزر نفسه وللنص المجاور له لترتيبهما بجوار بعضهما بمسافة ممتازة.
form-switch: سحر البوتستراب! مجرد إضافة هذا الكلاس للحاوية form-check، يتحول شكل الـ Checkbox المربع العادي إلى شكل زر (Switch) جميل يحاكي أزرار الموبايل!

لإلصاق نص أو أيقونة أو زر بجوار حقل الإدخال مباشرة لتكوين عنصر واحد متصل.

المعاينة

@

input-group: الحاوية التي تجعل الحقل وما يجاوره يبدوان كقطعة واحدة متصلة بدمج الحدود وإلغاء المسافات.
input-group-text: توضع للنصوص البسيطة أو الرموز (مثل أيقونة أو @ أو $) لتعطيها خلفية رمادية وتجعلها ملتصقة بالحقل.
يمكن وضع زر btn مباشرة وسيقوم البوتستراب بإلصاقه فوراً! مفيد جداً لحقول البحث أو الكوبونات.

عرض رسائل وحواف خضراء/حمراء بناءً على ما إذا كانت مدخلات المستخدم صحيحة أم لا.

المعاينة

was-validated: يُوضع على الـ <form> ليفعّل عملية التحقق. بعدها سيقوم بوتستراب بالبحث عن أي حقول تملك خاصية required ويعطيها لونا وتأثيرا.
أو للتحكم اليدوي (كما في هذا المثال)، استخدمنا is-valid ليصبح الحقل أخضر ومقبولاً، أو is-invalid ليصبح أحمر وفيه خطأ.
valid-feedback و invalid-feedback: هي الحاويات التي تظهر فيها الرسائل الخضراء والحمراء، ولا تظهر هذه الحاويات إطلاقاً إلا إذا كان الحقل معلماً بكلاس الصلاحية المطابق لها.